<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>虚拟dom</title>
	</head>
	<body>
		<script>
			// 既然我们已经有了DOM,为什么还需要额外加一层抽象?
			// 首先,我们都知道在前端性能优化的一个秘诀就是尽可能少地操作DOM,不仅仅是DOM相对较慢,更因为频繁变动DOM会造成浏览器的回流或者重回,这些都是性能的杀手,
			// 因此我们需要这一层抽象,在patch过程中尽可能地一次性将差异更新到DOM中,这样保证了DOM不会出现性能很差的情况.
			// 其次,现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,
			// 可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动DOM操作可以大大提高开发效率.
			// 最后,也是Virtual DOM最初的目的,就是更好的跨平台,比如Node.js就没有DOM,如果想实现SSR(服务端渲染),那么一个方式就是借助Virtual
			// DOM,因为Virtual DOM本身是JavaScript对象.
			// 什么是虚拟DOM： ⽤ JavaScript 对象表示 DOM 信息和结构，更新后使之与真实dom保持同步，同步过程就是协调，核心是diff算法。
			// 为什么要用虚拟DOM： DOM操作很慢，轻微的操作都可能导致⻚面重新排 版，⾮常耗性能。相对于DOM对象，js对象处理起来更快， 而且更简单。
			// 通过diff算法对比新旧vdom之间的差异，可以 批量的、最⼩化的执行dom操作，从而提高性能
		</script>
	</body>
</html>
